<template>
  <el-dialog
    ref="infodialog"
    title="项目详情"
    :visible.sync="isSeeInfo"
    width="60%"
    :before-close="handleClose"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :destroy-on-close="true"
  >
    <el-form
      v-if="dialogItemObj"
      :model="dialogItemObj"
      label-width="100px"
      label-position="left"
    >
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="申报立项" name="1">
          <el-col :span="24">
            <el-col :span="8">
              <el-form-item label="项目名称:">
                <span>{{ dialogItemObj.projectName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="主管单位:">
                <span>{{ dialogItemObj.primaryUnit }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合作单位:">
                <span>{{ dialogItemObj.cooperateUnit }}</span>
              </el-form-item>
            </el-col>
          </el-col>

          <el-col :span="24">
            <el-col :span="8">
              <el-form-item label="项目周期:">
                <span>{{
                  dialogItemObj.projectCycle ? dialogItemObj.projectCycle : "--"
                }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="立项申报书:">
                <span v-if="dialogItemObj.appendixUrl">
                  <span
                    v-for="(i, index) in dialogItemObj.appendixUrl"
                    :key="index"
                    >{{ i.fileName }}</span
                  >
                </span>
                <span v-else>--</span>
              </el-form-item>
            </el-col>
          </el-col>
        </el-collapse-item>
        <el-collapse-item title="登记结果" name="2">
          <el-col :span="24">
            <el-form-item label="是否通过立项:">
              <span v-if="dialogItemObj.xmProjectAppendix.isAccess == 0"
                >是</span
              >
              <span v-else>否</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="项目合同:">
              <div
                v-if="
                  dialogItemObj.xmProjectAppendix.contractAppendixUrl.length
                "
              >
                <span
                  v-for="(i, index) in dialogItemObj.xmProjectAppendix
                    .contractAppendixUrl"
                  :key="index"
                  >{{ i.fileName }}</span
                >
              </div>
              <div v-else>暂无</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="立项文件:">
              <div
                v-if="dialogItemObj.xmProjectAppendix.setUpAppendixUrl.length"
              >
                <span
                  v-for="(i, index) in dialogItemObj.xmProjectAppendix
                    .setUpAppendixUrl"
                  :key="index"
                  >{{ i.fileName }}</span
                >
              </div>
              <div v-else>暂无</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="项目实施计划:">
              <div
                v-if="
                  dialogItemObj.xmProjectAppendix.projectExecutionAppendixUrl
                    .length
                "
              >
                <span
                  v-for="(i, index) in dialogItemObj.xmProjectAppendix
                    .projectExecutionAppendixUrl"
                  :key="index"
                  >{{ i.fileName }}</span
                >
              </div>
              <div v-else>暂无</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="通知文件:">
              <div
                v-if="dialogItemObj.xmProjectAppendix.noticeAppendixUrl.length"
              >
                <span
                  v-for="(i, index) in dialogItemObj.xmProjectAppendix
                    .noticeAppendixUrl"
                  :key="index"
                  >{{ i.fileName }}</span
                >
              </div>
              <div v-else>暂无</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="其他:">
              <div
                v-if="dialogItemObj.xmProjectAppendix.otherAppendixUrl"
              >
                <span
                  v-for="(i, index) in dialogItemObj.xmProjectAppendix
                    .otherAppendixUrl"
                  :key="index"
                  >{{ i.fileName }}</span
                >
              </div>
              <div v-else>暂无</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="项目实施阶段:">
              <el-table
                border
                style="width: 100%"
                :data="dialogItemObj.xmProjectPeriodList"
              >
                <el-table-column label="#" width="50" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="periodName"
                  label="阶段"
                  align="center"
                />
                <el-table-column
                  prop="periodStartTime"
                  label="开始时间"
                  align="center"
                />
                <el-table-column
                  prop="periodEndTime"
                  label="结束时间"
                  align="center"
                />
                <el-table-column
                  prop="userName"
                  label="负责人"
                  align="center"
                />
              </el-table>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="实施人员:">
              <el-table
                :data="dialogItemObj.xmProjectPersonList"
                border
                style="width: 100%"
              >
                <el-table-column label="本单位" align="left">
                  <el-table-column label="#" width="50" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.sort }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="createBy"
                    label="姓名"
                    align="center"
                  />
                  <el-table-column
                    prop="personAge"
                    label="年龄"
                    align="center"
                  />
                  <el-table-column
                    prop="personUnit"
                    label="单位"
                    align="center"
                  />
                  <el-table-column
                    prop="personZhiji"
                    label="职务、职称"
                    align="center"
                  />
                  <el-table-column
                    prop="personWork"
                    label="在项目实施过程中拟承担的具体工作"
                    align="center"
                  />
                </el-table-column>
              </el-table>
              <el-table
                :data="dialogItemObj.xmProjectOtherPersonList"
                border
                style="width: 100%"
              >
                <el-table-column label="外单位" align="left">
                  <el-table-column label="#" width="50" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.sort }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="姓名"
                    align="center"
                  />
                  <el-table-column
                    prop="age"
                    label="年龄"
                    align="center"
                  />
                  <el-table-column
                    prop="unit"
                    label="单位"
                    align="center"
                  />
                  <el-table-column
                    prop="dept"
                    label="职务、职称"
                    align="center"
                  />
                  <el-table-column
                    prop="work"
                    label="在项目实施过程中拟承担的具体工作"
                    align="center"
                  />
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="项目实施经费预算:">
              <el-table
                :data="dialogItemObj.xmProjectFundsList"
                border
                style="width: 100%"
              >
                <el-table-column label="#" width="50" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.fundsEnumKey }}
                  </template>
                </el-table-column>
                <el-table-column label="预算支出科目" align="center">
                  <template slot-scope="scope">
                    {{ yusuanlist[scope.row.fundsEnumKey - 1] }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fundsAmount"
                  label="金额（万元）"
                  align="center"
                />
                <el-table-column prop="note" label="备注" align="center" />
              </el-table>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="经费预算附件:">
              <el-col :span="24">
                <div
                  v-if="dialogItemObj.xmProjectAppendix.fundsAppendixUrl.length"
                >
                  <span
                    v-for="(i, index) in dialogItemObj.xmProjectAppendix
                      .fundsAppendixUrl"
                    :key="index"
                    >{{ i.fileName }}</span
                  >
                </div>
                <div v-else>暂无</div>
              </el-col>
            </el-form-item>
          </el-col>
        </el-collapse-item>
        <!-- <el-collapse-item title="审核流程" name="3">
          <el-steps :active="100" align-left>
            <el-step
              v-for="(i, index) in dialogItemObj.xmProjectCommentList"
              :key="index"
              :title="i.createBy"
              :description="i.projectPeriodText"
            >
            </el-step>
          </el-steps>
        </el-collapse-item> -->
      </el-collapse>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleClose">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    isSeeInfo: {
      type: Boolean,
      default: () => false,
    },
    dialogItemObj: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      activeNames: "1",
      yusuanlist: [
        "咨询费",
        "差旅费",
        "培训/会议费",
        "劳务费",
        "专用设备购置费",
        "专用材料购置费",
        "图书文献数据费",
        "出版/文献/信息传播/知识产权事务费",
        "其他支出",
        "咨询费",
        "差旅费",
        "培训/会议费",
        "劳务费",
        "专用设备购置费",
        "专用材料购置费",
        "图书文献数据费",
        "出版/文献/信息传播/知识产权事务费",
        "其他支出",
      ],
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    handleClose() {
      this.$emit("handleCloseFn", false);
    },
  },
};
</script>

<style>
.el-dialog__title {
  font-size: 1.5rem;
}
.el-collapse-item__header {
  font-size: 1.2rem;
  font-weight: 800;
}
</style>
